<template>
  <div class="article">
    <el-col :span="24">
      <div class="ql-container ql-snow">
        <h1>{{ article.title }}</h1>
        <div class="ql-editor" v-html="article.content"></div>
      </div>
      <!-- <editor v-html="form.content" style="background-color:white"></editor> -->
    </el-col>
  </div>
</template>

<script>
import axios from 'axios';
import 'quill/dist/quill.snow.css';
import NProgress from 'nprogress';

export default {
  data() {
    return {
      article: null, // 文章数据初始化为空
    };
  },
  created() {
    this.fetchArticle();
  },
  methods: {
    fetchArticle() {
      // 获取文章ID
      const articleId = this.$route.params.id;
      axios
        .get(`api/article/${articleId}`)
        .then((response) => {
          this.article = response.data.data; // 假设后端直接返回文章数据
          NProgress.done();
        })
        .catch((error) => {
          console.error('获取文章详细信息失败', error);
        });
    },
  },
};
</script>

<style>
/* 样式 */
</style>
